<template>
  <div class="enter" v-if="updatalist">
    <div class="head">
      <h1>确认订单</h1>
    </div>
    
    <div class="addadree">
      <div class="title" @click="Address">
        <p><img src="../assets/img/addone.png" alt=""> 新增地址</p>
      </div>
    </div>
    <div class="addlist" v-if="addlist">
        <p>{{arr2.province}}{{arr2.city}}{{arr2.county}}</p>
        <h3>{{arr2.addressDetail}}</h3>
        <div class="addbottom">
          <h4>{{arr2.name}}</h4><span>{{arr2.tel}}</span>
        </div>
    </div>
    <div class="list">
        <div class="list_title">
            坚果商城
        </div>
      <div class="list_head" v-for="(item, index) in newarr" :key="index">
        <div class="left">
          <img :src="item.list.url" alt="" />
        </div>
        <div class="middle">
          <p>{{ item.list.name }}</p>
          <h5>{{ item.list.Description }}</h5>
          <h6>七天无理由退货</h6>
        </div>
        <div class="right">
          <p>&yen;{{item.list.price }}</p>
          <p>*{{ item.list.num }}</p>
        </div>
      </div>
      <div class="list_middle">
        <div class="left">配送服务</div>
        <div class="right">
          <p>快递 免邮 送运费险</p>
          <p>预计10月30日到达</p>
          <h4>16:00前付款</h4>
        </div>
      </div>
      <div class="list_content">
        <div class="left">开具发票</div>
        <div class="right">本次不开具发票</div>
      </div>
      <div class="list_content">
        <div class="left">订单备注</div>
        <div class="right">无备注</div>
      </div>
    </div>
    <div class="bottom">
      <p>一共{{num2}}件 合计:&yen;<span>{{num}}.00</span></p>
      <div class="btn" @click="tips">提交订单</div>
    </div>
    <popup-com v-show='flag'></popup-com>
  </div>
</template>

<script>

import PopupCom from "../components/PopupCom.vue";
export default {
  props: ["updatalist","addlist","buylist","shoplist"],
  data() {
    return {
        flag: false,
        arr1:null,
        arr2:null,
        newarr:null,
        // sum:0,
    };
  },
  methods: {
    tips(){
        this.flag=true
        // this.sum+=1
        // window.localStorage.setItem('all',this.sum)
    },
    Address(){
        this.$router.push('/address')
    },
  },
  components:{
    PopupCom
  },
  created() {
    this.sum = Number(window.localStorage.getItem('all'))
    console.log(this.shoplist);
     if (this.updatalist) {
        this.arr1=this.updatalist
     }

    if (this.addlist) {
        this.arr2=this.addlist
     }
    if (this.shoplist) {
        this.newarr=this.shoplist
    }

    
  },
  
  computed: {
    num() {
      return this.arr1.reduce(function (total, item) {
        return (total += Number(item.list.price * item.list.num));
      }, 0);
    },
    num2(){
        return this.arr1.reduce(function (total, item) {
        return (total += Number(item.list.num));
      }, 0);
    }
  },
};
</script>

<style lang="scss" scoped>
.enter {
    background-color: #f2f2f2;
    height: 700px;
  .head {
    width: 100%;
    height: 50px;
    //    margin-bottom: 20px;
    position: fixed;
    z-index: 9;
    top: 0px;
    border-bottom: 1px solid #dbdbdb;
    background-color: #fff;
    h1 {
      width: 70%;
      margin: 0 auto;
      text-align: center;
      line-height: 50px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 18px;
      font-weight: 700;
    }
  }
  .addlist{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
    border-bottom: 1px solid #f2f2f2;
    
    h3{  
        font-size: 18px;
        
           padding: 5px 5px;
           font-weight: 600;
    }
    p{
        font-size: 10px;
        color: gray;
          padding: 5px 5px;
    }
    .addbottom{
      display: flex;
      height: 20px;
     padding: 5px;
       h4{
          font-size: 14px;
          color: gray;
          height: 20px;
          line-height: 20px;
         
       }
       span{
        margin-left: 10px;
        display: block;
          height: 20px;
           font-size: 14px;
        line-height: 20px;
       }
    }
  }
  .addadree {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #fff;
    // border-radius: 20px;
    p {
      padding: 10px 0px;
      margin-left: 10px;
      border-bottom: 1px solid #f2f2f2;
      text-align: center;
      img{
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 3px;
      
      }
    }
  }
  .list {
    width: 90%;
    margin: 0 auto;
    background-color:#fff;
    margin-top: 20px;
    border-radius: 20px;
     overflow: hidden;
     .list_title{
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 700;
     }
    .list_head {
      display: flex;
      margin-bottom: 10px;
      border-bottom: 1px solid #f2f2f2;
      .left {
        width: 30%;
        background-color: rgb(255, 255, 255);
        overflow: hidden;
        border-radius: 20px;
        img {
           width: 90px;
           height: 90px;
        }
      }
      .middle {
        padding-left: 10px;
        width: 55%;
        p {
          margin-bottom: 5px;
          overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;

        }
        h5 {
          color: gray;
          margin-bottom: 5px;
        }
        h6 {
            margin-top: 20px;
          width: 60%;
          border: 1px solid red;
          color: red;
          text-align: center;
          padding-bottom: 5px;
        }
      }
      .right {
        margin-top: 20px;
        margin-left: 10px;
        padding-right: 10px;
        p {
          font-size: 12px;
          padding-bottom: 5px;
        }
      }
    }
    .list_middle {
      display: flex;
      justify-content: space-between;
      .left {
        height: 65px;
        line-height: 65px;
        padding-left: 10px;
      }
      .right{
       
        p{
            font-size: 12px;
        }
        h4{
            font-size: 12px;
        }
      }
    }
    .list_content {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      pad: 20px 0px;
      .left {
        padding-left: 10px;
        font-size: 12px;
      }
      .right {
        padding-right: 10px;
        font-size: 12px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    bottom: 0px;
    p {
      margin: 5px 0px;
      line-height: 50px;
      width: 40%;
       color: rgb(21, 20, 20);
       font-size: 12px;
      span {
       color: red;
       font-size: 15px;
      }
    }
    .btn {
      margin: 5px 0px;
      margin-right: 10px;
      color: white;
      padding: 10px 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 20px;
      background-color: orange;
    }
  }
}
</style>